<template>
  <div v-if="show">
    <div class="image-upload-bg"></div>
    <div class="header-image-upload">
      <div class="upload-pic">
        <el-button type="success">上传头像<input @change="change" type="file" accept="image"></el-button>
      </div>
      <div style="min-height:200px;max-height: 250px;height: 100%;width:100%;margin-top:20px;">
        <img :src="value" ref="image_box" alt="">
      </div>
      <div class="btn-group-upload">
        <el-button type="primary" @click="save">确定</el-button>
        <el-button type="danger" @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "imageFile",
  props:{
    show:{
      type:Boolean,
      default:false,
    }
  },
  data() {
    return {
      value: "",
      cropper: null
    }
  },
  mounted() {

  },
  methods: {
    cropperStart() {
      if (this.value == '') {
        return false
      }
      var image_box = this.$refs['image_box'];
      if (!this.cropper){
        this.cropper = new Cropper(image_box, {
          width: 299,
          height: 240,
          modal: false,
          guides: false,
          highlight: false,
          background: false,
          //minCanvasWidth: 280,
          //minCanvasHeight: 220,
          minCropBoxWidth: 100,
          minCropBoxHeight: 100,
          minContainerWidth: 260,
          minContainerHeight: 220,
          minCanvasWidth: 80,
          minCanvasHeight: 80,
          strict: false,
          aspectRatio: 1 / 1
        });
      }else{
        this.cropper.replace(this.value);  
      }
    },
    cancel(){
      this.cropper = null;
      this.value = "";
      this.$emit('close');
    },
    save(){
      if(!this.cropper){
        this.$emit('uploadComfirm','');
        return false;
      }
      var result = this.cropper.getCroppedCanvas() //剪裁区域结果
      var res = result.toDataURL('', 0.3);
      this.cropper = null;
      this.value = "";
      this.$emit('uploadComfirm',res);
    },
    change(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      let picValue = files[0];
      let url = this.getObjectURL(picValue);
      this.value = url;
      setTimeout(() => {
        this.cropperStart();
      }, 200);
    },
    getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) { // basic  
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) { // mozilla(firefox)  
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) { // webkit or chrome  
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },
  }
}
</script>
<style lang="scss">
.image-upload-bg {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.btn-group-upload {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

.upload-pic {
  padding-top: 20px;
  text-align: center;
  button {
    position: relative;
  }
  input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}

.header-image-upload {
  width: 95%;
  max-width: 640px;
  position: fixed;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  .upload-main {
    width: 100px;
    height: 100px;
    margin: 10px auto;
  }
}
</style>
